Admin: Standardize mobile viewport heights for interactive elements by himanshupathak95 · Pull Request #11750 · WordPress/wordpress-develop

himanshupathak95 · 2026-05-07T13:41:07Z

Trac ticket: https://core.trac.wordpress.org/ticket/64999

This PR fixes inconsistent interactive element heights to 40px in the admin mobile viewport (≤782px) on:

Plugins > Add Plugin: search field, Keyword dropdown, Install button
Media Library > Grid: filter dropdowns, search field, Bulk select button
Settings > General: Custom date format and time format inputs

Follow-up to [62294].

Tested in Chrome at 782px viewport width (mobile emulation). Before/after
screenshots attached.

Screen / Component	Before	After
Add Themes > Search field
Settings > General > Custom date/time format inputs
Plugins > Add Plugin > Search field
Plugins > Add Plugin > Keyword dropdown
Media Library > Grid > Filter dropdowns
Media Library > Grid > Search input
Media Library > Grid > Bulk select button

github-actions · 2026-05-07T13:45:51Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

github-actions · 2026-05-08T08:56:34Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props abcd95, wildworks.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

t-hamano

Thanks for the PR! It looks good for the most part, but there are a few points that need further adjustment.

Media Library (List view): We should be able to use the button-compact class on these two buttons without writing any CSS.

Install Themes: These buttons should be 32px in size.

Install Plugins: These buttons should be 32px in size.

…class

himanshupathak95 · 2026-05-12T07:42:31Z

Thanks @t-hamano for the suggestions and catching the leftovers.

I've tried to use classes and avoid hardcoding as much as possible.

Area	Before	After
Theme Activate Button
Plugin Install Button

Mode	Before	After
Grid Mode	Screen.Recording.2026-05-12.at.13.00.25.mov	Screen.Recording.2026-05-12.at.12.58.19.mov
List Mode	Screen.Recording.2026-05-12.at.13.00.43.mov	Screen.Recording.2026-05-12.at.12.57.58.mov

t-hamano

Thanks for the update!

Please note that on mobile layouts, the button height is generally 40px. Therefore, the button height in the following layout is incorrect.

Theme Activate Button:

Plugin Install Button:

The .buttom-compact class should also be usable in these areas.

t-hamano · 2026-05-12T09:10:36Z

 			if ( $this->is_trash && $this->has_items()
 				&& current_user_can( 'edit_others_posts' )
 			) {
 				submit_button( __( 'Empty Trash' ), 'apply', 'delete_all', false );


Suggested change

submit_button( __( 'Empty Trash' ), 'apply button-compact', 'delete_all', false );

This is not directly related to this PR, but it would be good to standardize this button as well. Here's how to display this button.

Add define( 'MEDIA_TRASH', true );

Upload multiple media files and move some of them to the trash.

Access http://localhost:8889/wp-admin/upload.php?attachment-filter=trash.

t-hamano · 2026-05-12T09:15:33Z

 .plugin-action-buttons li .button {
 	min-height: 32px;
 	line-height: 2.30769231; /* 30px for 32px min-height */
+	font-size: 13px;
 	padding: 0 12px;
 }


On mobile layouts, the button height is not 40px.

We should be able to remove these styles entirely and add the .button-compact class to the buttons within wp_get_plugin_action_button() function.

t-hamano · 2026-05-12T09:17:52Z

 		font-size: 14px;
 		vertical-align: middle;
 		min-height: 40px;
-		margin-bottom: 4px;


The .wp-core-ui .button class applies to all buttons in the dashboard, so removing the bottom margin could have unintended consequences. Let's restore this bottom margin.

Introduced in [26386], these work perfectly when the input and button sizes were not 40px; now that they are, this creates a slight misalignment -

Screen.Recording.2026-05-13.at.13.57.06.mov

I checked the admin UI for any breaking changes, but could not find anything noticeable.

My prediction is that this bottom margin is necessary to create a gap between the adjacent elements when the button wraps on mobile. If consumers have configured layouts that rely on this bottom margin, removing it could impact those layouts.

himanshupathak95 · 2026-05-13T08:40:39Z

Thanks @t-hamano for the reply.

Please note that on mobile layouts, the button height is generally 40px. Therefore, the button height in the following layout is incorrect.
The .button-compact class should also be usable in these areas.

I intentionally made them 32px in size since you asked the same in #11750 (review), specifically -

Install Themes: These buttons should be 32px in size.
Install Plugins: These buttons should be 32px in size.

I also feel like they should have .button-compact class and should be 40px for consistency, but your review suggested otherwise. So, just to be sure, we still want this to be 40px, right?

t-hamano · 2026-05-13T08:59:25Z

I intentionally made them 32px in size since you asked the same in #11750 (review), specifically -

Install Themes: These buttons should be 32px in size.
Install Plugins: These buttons should be 32px in size.

I also feel like they should have .button-compact class and should be 40px for consistency, but your review suggested otherwise. So, just to be sure, we still want this to be 40px, right?

Apologies, there was an error in my explanation. What I meant to say is that all buttons should always be 40px on mobile. This means that a button with a 32px size in the desktop layout should change to a 40px size in the mobile layout. To achieve this, I wanted to suggest that the "button-compact" CSS class would be appropriate.

himanshupathak95 force-pushed the fix/64999-mobile-form-elements branch from dca69f9 to 220cc0c Compare May 8, 2026 08:53

himanshupathak95 marked this pull request as ready for review May 8, 2026 08:56

t-hamano force-pushed the fix/64999-mobile-form-elements branch from 220cc0c to 3f78edc Compare May 12, 2026 02:21

t-hamano reviewed May 12, 2026

View reviewed changes

Comment thread src/wp-admin/css/media.css Outdated

himanshupathak95 force-pushed the fix/64999-mobile-form-elements branch from 3f78edc to 2545903 Compare May 12, 2026 07:23

himanshupathak95 added 10 commits May 12, 2026 12:54

Forms: increase ht to 40px

e2a7002

Add plugin: Increase min-height of form and dropdown to 40px

0093bea

Media library: Increase min-ht to 40px

5ffc791

Enhance select mode toggle button styling by adding 'button-compact' …

b286add

…class

Increase button font size to improve readability in action links

162c50a

Remove min-height and padding adjustments for classnames

e4e9460

Increase font size of search loading indicator for better readability

93dd2ea

Enhance filter button styling by adding 'button-compact' class

f0f5e28

Enhance search button styling by adding 'button-compact' class

9a329e4

Remove margin-bottom from button styles for improved layout consistency

c4e83fc

himanshupathak95 force-pushed the fix/64999-mobile-form-elements branch from 2545903 to c4e83fc Compare May 12, 2026 07:24

t-hamano reviewed May 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin: Standardize mobile viewport heights for interactive elements#11750

Admin: Standardize mobile viewport heights for interactive elements#11750
himanshupathak95 wants to merge 10 commits into
WordPress:trunkfrom
himanshupathak95:fix/64999-mobile-form-elements

himanshupathak95 commented May 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

github-actions Bot commented May 8, 2026 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

himanshupathak95 commented May 12, 2026

Uh oh!

t-hamano left a comment

Uh oh!

t-hamano May 12, 2026

Uh oh!

t-hamano May 12, 2026

Uh oh!

t-hamano May 12, 2026

Uh oh!

himanshupathak95 May 13, 2026

Uh oh!

t-hamano May 13, 2026

Uh oh!

himanshupathak95 commented May 13, 2026

Uh oh!

t-hamano commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


	submit_button( __( 'Empty Trash' ), 'apply button-compact', 'delete_all', false );

Conversation

himanshupathak95 commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 7, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

github-actions Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

himanshupathak95 commented May 12, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano May 12, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano May 12, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano May 12, 2026

Choose a reason for hiding this comment

Uh oh!

himanshupathak95 May 13, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano May 13, 2026

Choose a reason for hiding this comment

Uh oh!

himanshupathak95 commented May 13, 2026

Uh oh!

t-hamano commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

himanshupathak95 commented May 7, 2026 •

edited

Loading

github-actions Bot commented May 8, 2026 •

edited

Loading